import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import * as _ from 'lodash'
import { MissionService } from '../../../services/mission.service';
import { IndexService } from './index.service';
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss'],
  providers: [IndexService]
})
export class IndexComponent implements OnInit {

  public chartsData: any = {
    activeCount: '',
    failedCount: '',
    inactiveCount: '',
    completeCount: '',
    delayedCount: ''
  };
  // 最上侧四个任务统计
  statCount: any = {}
  // 正在运行图表
  activeChart: any;
  // 已完成图表
  completeChart: any;
  // 失败图表
  failedChart: any;
  // WeekChart（柱状图）
  weekChart: any;
  weekChartData: any = {
    completeCount: [],
    failedCount: [],
    date: []
  };
  // TaskChart(饼图)
  taskChart: any;
  taskChartData: any = {
    completeTotalCount: [],
    failedTotalCount: [],
    TotalCountPart: [],
    TotalCount: []
  };
  xAxis: any = [];
  constructor(
    public missionService: MissionService,
    private indexService: IndexService,
  ) {
    // X轴数组
    let xAxis = new Array;
    // 失败数组
    let failedCount = new Array;
    // 成功数组
    let activeCount = new Array;
    // 闲置数组
    let inactiveCount = new Array;
    // 已完成数组
    let completeCount = new Array;
    // 已推迟数组
    let delayedCount = new Array;
    this.missionService.broadcastEvent.subscribe((data: any) => {
      //console.log(data);
      // this.chartsData.activeCount = data.activeCount;
      // this.chartsData.failedCount = data.failedCount;

      if (xAxis.length == 10) {
        xAxis.shift();
      }
      xAxis.push(data.timestamp);

      if (failedCount.length == 10) {
        failedCount.shift();
      }
      failedCount.push(data.failedCount);

      if (activeCount.length == 10) {
        activeCount.shift();
      }
      activeCount.push(data.activeCount);
      // console.log(xAxis.length);
      if (inactiveCount.length == 10) {
        inactiveCount.shift();
      }
      inactiveCount.push(data.inactiveCount);

      if (completeCount.length == 10) {
        completeCount.shift();
      }
      completeCount.push(data.completeCount);

      if (delayedCount.length == 10) {
        delayedCount.shift();
      }
      delayedCount.push(data.delayedCount);

      this.completeChart.data.datasets[0].data = completeCount;
      this.activeChart.data.datasets[0].data = activeCount;
      this.failedChart.data.datasets[0].data = failedCount;
      this.completeChart.data.labels = xAxis;
      this.activeChart.data.labels = xAxis;
      this.failedChart.data.labels = xAxis;
      this.completeChart.update();
      this.activeChart.update();
      this.failedChart.update();
    });
  }



  // 请求API数据
  loadList() {
    let that = this;
    this.indexService.list().subscribe(data => {
      if (data) {
        //console.log('xxxx' + data);
        this.statCount = data

      }

    },
      this.indexService.weekData().subscribe(data => {
        if (data) {
          // 柱状图数据绑定
          this.weekChartData.completeCount = _.map(data, 'completeCount');
          this.weekChartData.failedCount = _.map(data, 'failedCount');
          this.weekChartData.date = _.map(data, 'date');
          // console.log('failed'+this.weekChartData.failedCount);
          // console.log(this.weekChartData.completeCount);
          // console.log('date'+this.weekChartData.date);
          this.weekChart.data.datasets[0].data = this.weekChartData.completeCount;
          this.weekChart.data.datasets[1].data = this.weekChartData.failedCount;
          this.weekChart.data.labels = this.weekChartData.date;
          this.weekChart.update();
          // 饼图数据绑定
          this.taskChartData.completeTotalCount = _.sum(this.weekChartData.completeCount);
          //console.log('xxxpp'+this.taskChartData.completeTotalCount);
          this.taskChartData.failedTotalCount = _.sum(this.weekChartData.failedCount);
          this.taskChartData.TotalCount = _.concat(this.taskChartData.completeTotalCount, this.taskChartData.failedTotalCount);
          this.taskChart.config.data.datasets[0].data = this.taskChartData.TotalCount;
          //console.log('xixixixi'+this.taskChartData.TotalCount);
          this.taskChart.update();
        }
      })
    )
  }
  ngOnInit() {
    // 请求API
    this.loadList();

    // 已完成图表
    var canvas: any = document.getElementById("completeChart");
    var ctx = canvas.getContext("2d");
    var data = {

      // X轴
      labels: [
      ],
      datasets: [
        {
          label: '已完成',
          data: [],
          borderColor: 'rgba(75, 192, 192, 0.8)',
          backgroundColor: [
            "rgba(75, 192, 192, 0.5)"
          ],
          hoverBackgroundColor: [
            "#FF6384"
          ],
          fill: 'start'
        }

      ]
    };

    this.completeChart = new window['Chart'](ctx, {
      type: 'line',
      data: data,
      options: {
        responsive: true,
        title: {
          display: true,
          text: "即时调度情况",
          fontSize: 20
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              // max: 10,
              stacked: true
            }
          }],

        }
      }

    });


    // 正在运行图表
    var canvas: any = document.getElementById("activeChart");
    var ctx = canvas.getContext("2d");
    var data2 = {

      // X轴
      labels: [
      ],
      datasets: [
        {
          label: '正在运行',
          data: [],
          borderColor: 'rgba(56, 162, 235, 0.8)',
          backgroundColor: [
            "rgba(56, 162, 235, 0.5)"
          ],
          hoverBackgroundColor: [
            "#FF6384"
          ],
          fill: 'start'
        }

      ]
    };

    this.activeChart = new window['Chart'](ctx, {
      type: 'line',
      data: data2,
      options: {
        responsive: true,
        title: {
          display: true,
          text: "即时调度情况",
          fontSize: 20
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              // max: 10,
              stacked: true
            }
          }],

        }
      }

    });

    // 失败图表
    var canvas: any = document.getElementById("failedChart");
    var ctx = canvas.getContext("2d");
    var data3 = {

      // X轴
      labels: [
      ],
      datasets: [
        {
          label: '失败',
          data: [],
          borderColor: 'rgba(255, 99, 132, 0.8)',
          backgroundColor: [
            "rgba(255, 99, 132, 0.5)"
          ],
          hoverBackgroundColor: [
            "#FF6384"
          ],
          fill: 'start'
        }

      ]
    };

    this.failedChart = new window['Chart'](ctx, {
      type: 'line',
      data: data3,
      options: {
        responsive: true,
        title: {
          display: true,
          text: "即时调度情况",
          fontSize: 20
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              // max: 10,
              stacked: true
            }
          }],

        }
      }

    });


    // 

    var randomScalingFactor = function () {
      return Math.round(Math.random() * 100);
    };

    var config = {
      type: 'pie',
      data: {
        datasets: [{
          data: [],
          backgroundColor: [
            '#4cc0c0',
            // '#38a2eb'
            '#ff6384',
          ],
          label: 'Dataset 1'
        }],
        labels: [
          "已完成任务数",
          "失败任务数"
        ]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: "一周执行情况统计"
        }
      }
    };
    var canvas: any = document.getElementById("taskChart");
    var ctx = canvas.getContext("2d");
    this.taskChart = new window['Chart'](ctx, config);



    var barChartData = {
      labels: [],
      datasets: [{
        label: '已完成任务数',
        backgroundColor: 'rgb(77, 192, 192)',
        stack: '已完成任务数',
        data: []
      }, {
        label: '失败任务数',
        backgroundColor: 'rgb(255, 99, 132)',
        stack: '失败任务数',
        data: []
      }]

    };
    var canvas2: any = document.getElementById("weekChart");
    var ctx2 = canvas2.getContext("2d");
    this.weekChart = new window['Chart'](ctx2, {
      type: 'bar',
      data: barChartData,
      options: {
        title: {
          display: true,
          text: "一周执行情况"
        },
        tooltips: {
          mode: 'index',
          intersect: false
        },
        responsive: true,
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      }
    });
  }


}




